<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>区域对比 - 宜居指数分析系统</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/Chart.js/4.4.0/chart.min.js"></script>
    <link th:href="@{/css/custom.css}" rel="stylesheet">
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container">
            <a class="navbar-brand" href="/">
                <i class="fas fa-cloud-sun"></i> 宜居指数分析系统
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="/search">
                            <i class="fas fa-search"></i> 数据查询
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="/compare">
                            <i class="fas fa-chart-bar"></i> 区域对比
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container py-4">
        <h2 class="mb-4"><i class="fas fa-chart-bar"></i> 区域对比分析</h2>
        
        <div class="row mb-4">
            <div class="col-md-4">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">选择对比区域</h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label class="form-label">区域1</label>
                            <select class="form-select" id="province1" name="province1">
                                <option value="">选择省份</option>
                                <option th:each="province : ${provinces}" th:value="${province}" th:text="${province}"></option>
                            </select>
                            <select class="form-select mt-2" id="city1" name="city1" disabled>
                                <option value="">选择城市</option>
                            </select>
                            <select class="form-select mt-2" id="district1" name="district1" disabled>
                                <option value="">选择区县</option>
                            </select>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">区域2</label>
                            <select class="form-select" id="province2" name="province2">
                                <option value="">选择省份</option>
                                <option th:each="province : ${provinces}" th:value="${province}" th:text="${province}"></option>
                            </select>
                            <select class="form-select mt-2" id="city2" name="city2" disabled>
                                <option value="">选择城市</option>
                            </select>
                            <select class="form-select mt-2" id="district2" name="district2" disabled>
                                <option value="">选择区县</option>
                            </select>
                        </div>
                        
                        <button class="btn btn-primary w-100" id="compareBtn" disabled>
                            <i class="fas fa-chart-line"></i> 开始对比
                        </button>
                    </div>
                </div>
            </div>
            
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">对比结果</h5>
                    </div>
                    <div class="card-body">
                        <canvas id="compareChart" width="400" height="200"></canvas>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">区域1数据</h5>
                    </div>
                    <div class="card-body">
                        <div id="region1Data" class="text-center text-muted">
                            请选择区域进行对比
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">区域2数据</h5>
                    </div>
                    <div class="card-body">
                        <div id="region2Data" class="text-center text-muted">
                            请选择区域进行对比
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <footer class="bg-dark text-white py-4 mt-5">
        <div class="container text-center">
            <p>&copy; 2024 宜居指数分析系统</p>
        </div>
    </footer>

    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
    <script>
        let compareChart = null;
        
        function loadCities(provinceSelect, citySelect) {
            const province = $(provinceSelect).val();
            if (province) {
                $.get('/api/cities/' + province, function(data) {
                    $(citySelect).empty().append('<option value="">选择城市</option>');
                    $.each(data, function(index, city) {
                        $(citySelect).append('<option value="' + city + '">' + city + '</option>');
                    });
                    $(citySelect).prop('disabled', false);
                });
            }
        }
        
        function loadDistricts(province, city, districtSelect) {
            if (city) {
                $.get('/api/districts/' + province + '/' + city, function(data) {
                    $(districtSelect).empty().append('<option value="">选择区县</option>');
                    $.each(data, function(index, district) {
                        $(districtSelect).append('<option value="' + district + '">' + district + '</option>');
                    });
                    $(districtSelect).prop('disabled', false);
                });
            }
        }
        
        function compareRegions() {
            const region1 = {
                province: $('#province1').val(),
                city: $('#city1').val(),
                district: $('#district1').val()
            };
            
            const region2 = {
                province: $('#province2').val(),
                city: $('#city2').val(),
                district: $('#district2').val()
            };
            
            if (region1.district && region2.district) {
                // 模拟API调用获取对比数据
                Promise.all([
                    fetch(`/api/compare?province=${region1.province}&city=${region1.city}&district=${region1.district}`),
                    fetch(`/api/compare?province=${region2.province}&city=${region2.city}&district=${region2.district}`)
                ]).then(responses => Promise.all(responses.map(r => r.json())))
                  .then(([data1, data2]) => {
                    updateCompareChart(data1, data2);
                    updateRegionData(1, data1);
                    updateRegionData(2, data2);
                });
            }
        }
        
        function updateCompareChart(data1, data2) {
            const ctx = document.getElementById('compareChart').getContext('2d');
            
            if (compareChart) {
                compareChart.destroy();
            }
            
            compareChart = new Chart(ctx, {
                type: 'radar',
                data: {
                    labels: ['宜居指数', '空气质量', '温度适宜度', '湿度适宜度', 'PM2.5水平'],
                    datasets: [{
                        label: $('#district1').val(),
                        data: [
                            data1.livableIndex,
                            100 - data1.averageAqi,
                            100 - Math.abs(data1.averageTemp - 20) * 5,
                            100 - Math.abs(data1.averageHumidity - 50) * 2,
                            100 - data1.averagePm25
                        ],
                        borderColor: 'rgb(255, 99, 132)',
                        backgroundColor: 'rgba(255, 99, 132, 0.2)'
                    }, {
                        label: $('#district2').val(),
                        data: [
                            data2.livableIndex,
                            100 - data2.averageAqi,
                            100 - Math.abs(data2.averageTemp - 20) * 5,
                            100 - Math.abs(data2.averageHumidity - 50) * 2,
                            100 - data2.averagePm25
                        ],
                        borderColor: 'rgb(54, 162, 235)',
                        backgroundColor: 'rgba(54, 162, 235, 0.2)'
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        r: {
                            beginAtZero: true,
                            max: 100
                        }
                    }
                }
            });
        }
        
        function updateRegionData(regionNum, data) {
            const elementId = `region${regionNum}Data`;
            const html = `
                <div class="row">
                    <div class="col-6">
                        <h6>宜居指数</h6>
                        <p class="h4 text-primary">${data.livableIndex.toFixed(1)}</p>
                    </div>
                    <div class="col-6">
                        <h6>平均AQI</h6>
                        <p class="h4 text-info">${data.averageAqi.toFixed(1)}</p>
                    </div>
                    <div class="col-6">
                        <h6>平均温度</h6>
                        <p class="h4 text-warning">${data.averageTemp.toFixed(1)}°C</p>
                    </div>
                    <div class="col-6">
                        <h6>平均湿度</h6>
                        <p class="h4 text-success">${data.averageHumidity.toFixed(1)}%</p>
                    </div>
                </div>
            `;
            $(`#${elementId}`).html(html);
        }
        
        $(document).ready(function() {
            // 区域1事件监听
            $('#province1').change(() => loadCities('#province1', '#city1'));
            $('#city1').change(() => loadDistricts($('#province1').val(), $('#city1').val(), '#district1'));
            $('#district1').change(() => $('#compareBtn').prop('disabled', !$('#district1').val() || !$('#district2').val()));
            
            // 区域2事件监听
            $('#province2').change(() => loadCities('#province2', '#city2'));
            $('#city2').change(() => loadDistricts($('#province2').val(), $('#city2').val(), '#district2'));
            $('#district2').change(() => $('#compareBtn').prop('disabled', !$('#district1').val() || !$('#district2').val()));
            
            // 对比按钮点击事件
            $('#compareBtn').click(compareRegions);
            
            // 模拟API端点
            window.apiCompare = function(params) {
                // 模拟数据
                return {
                    livableIndex: Math.random() * 40 + 60,
                    averageAqi: Math.random() * 100 + 30,
                    averageTemp: Math.random() * 20 + 10,
                    averageHumidity: Math.random() * 40 + 40,
                    averagePm25: Math.random() * 50 + 10
                };
            };
        });
    </script>
</body>
</html>
